<template>
  <div>
    <div>event</div>
    <!--    <child v-model="str"></child>-->
    <child v-model="boo"></child>
    {{boo}}
    {{str}}
    <br>
    <my-button @click.native="myConsole('click')"></my-button>
    <br>
    <my-input v-model="str"></my-input>
    <br>
    <button @click="myConsole($listeners)">click</button>
    <br>
    <sync-demo v-bind.sync="people" :age="people.age" v-on:update:age="people.age += $event"></sync-demo>
    {{people}}
  </div>
</template>

<script>
  //组件和 prop区分大小写，事件名不存在任何自动化的大小写转换
  import child from './child'
  import MyButton from './MyButton'
  import MyInput from './MyInput'
  import syncDemo from './syncDemo'


  export default {
    name: "MyEvent",
    data() {
      return {
        str: 'test',
        boo: true,
        people: {
          name: 'hg',
          age: 10
        }
      }
    },
    components: {
      child,
      MyButton,
      MyInput,
      syncDemo
    },
    methods: {
      myConsole(str) {
        console.log(str)
      }
    }
  }
</script>

<style scoped>

</style>
